
<template >
	<view style="width: 100%;display: flex;">
		<view class="left">
			<manage></manage>
		</view>
		<view style="width: 90%;">
			<uni-search-bar placeholder="搜索订单编号" bgColor="#EEEEEE" @confirm="search" cancelButton="none" />
			<!-- :loading="true" -->
			<uni-table border stripe type="selection" emptyText="暂无更多数据" selection-change="multipleChoose">

				<uni-tr>
					<uni-th align="center" width="60">序号</uni-th>
					<uni-th align="center">编号</uni-th>
					<uni-th align="center">商品编号</uni-th>
					<uni-th align="center">图片</uni-th>
					<uni-th align="center">操作</uni-th>
					<uni-th align="center"></uni-th>

				</uni-tr>
				<uni-tr v-for="(item, index) in picture" :key="index">
					<uni-td align="center">{{index}}</uni-td>
					<uni-td align="center">{{item.id}}</uni-td>
					<uni-td align="center">{{item.googId}}</uni-td>

					<uni-td align="center">
						<image :src="item.goodurl" style="width: 50px;height: 50px;"></image>
					</uni-td>

					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="edit(index)">修改</button>
							<button class="uni-button" size="mini" type="warn" @click="del(index)">删除</button>
						</view>
					</uni-td>
				</uni-tr>

			</uni-table>
			<view>
				<uni-row>
					<uni-col :span="3" class="grid">
						<button type="primary" icon="uni-icon-circle-plus-outline" size="mini"
							@click="inputDialogToggle" class="uni-button" width="30px">新增
						</button>
					</uni-col>
					<uni-col :span="3" class="grid">
						<button type="warn" icon="uni-icon-delete" size="mini" @click="delSelect" class="uni-button"
							width="30px">删除
						</button>
					</uni-col>
				</uni-row>
			</view>
			<br />
			<!-- <uni-pagination :total="50" title="标题文字" /> -->
			<!--分页条-->
			<uni-pagination background layout="prev, pager, next" :total="page.totalRecords" :page-size="page.pageSize"
				@current-change="currentChange()">
			</uni-pagination>
			<view>
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" title="新增商品图片" @close="closeaddPice" @confirm="confirmaddpice">
						<uni-forms :modelValue="addgForm" labelWidth="80px">
							<uni-forms-item label="商品编号" leftIcon="circle">
								<picker @change="sizePicker" :value="goodid" :range="goodordsid">
									<view class="textureCss">{{goodordsid[goodid]}}</view>
								</picker>
							</uni-forms-item>

							<uni-forms-item label="图片" prop="imgurl">
								<uni-easyinput v-model="addgForm.imgurl" placeholder="请插入图片" :disabled="true">
								</uni-easyinput>
								<button @click="select" type="default">上传</button><br>
							</uni-forms-item>

						</uni-forms>

					</uni-popup-dialog>

				</uni-popup>
			</view>

			<view>

				<uni-popup ref="eduDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" title="修改订单信息" @confirm="confirmputpicture"
						@close="closeputpicture">
						<uni-forms id="#editgForm" ref="#editgForm" :modelValue="editgForm" labelWidth="80px">
							<uni-forms-item label="序号:" prop="id" leftIcon="plusempty">
								<uni-easyinput style="height: 15px;" v-model="editgForm.id" :disabled="true">
								</uni-easyinput>
							</uni-forms-item>

							<uni-forms-item label="编号" leftIcon="circle">
								<picker @change="sizePicker" :value="goodid" :range="goodordsid">
									<view class="textureCss">{{goodordsid[goodid]}}</view>
								</picker>
							</uni-forms-item>

							<uni-forms-item label="图片" prop="imgurl">
								<uni-easyinput v-model="editgForm.imgurl" placeholder="请插入书籍图片" :disabled="true">
								</uni-easyinput>
								<button @click="select" type="default">上传</button><br>
							</uni-forms-item>

						</uni-forms>
					</uni-popup-dialog>
				</uni-popup>
			</view>
			<view>
				<uni-popup ref="delDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" title="删除图片" @confirm="delpirture" @close="delDian">
						<text>确定要删除编号为{{picture[pictureIndex].id}}的图片吗？</text>
					</uni-popup-dialog>
				</uni-popup>
			</view>

		</view>
		<!-- <manage></manage> -->
	</view>

</template>

<script>
	import manage from "@/components/manage/manage.vue";
	export default {
		components: {
			manage,
		},
		data() {
			return {
				pictureIndex:0,
				typeList: [],
				goodordsid: [],
				picture: [
					// {
					// 	 id:1,
					// 	    orderId:1,
					// 	    imgurl:"../../static/tabbar/lunbotu-01.jpg"
					// }
				],
				goodid: 0,
				indexes: 0,
				// url: "",
				intxt: '',
				labelcurrent: 0,
				current: 0,
				addgForm: {
					orderId: '',
					imgurl: ''

				},
				intxt: '',
				page: {
					pageSize: 10, //每页条数,  默认10条
					totalRecords: 0, //总条数
					totalPages: 0, //总页数
					pageNum: 0,
				},
				editIndex: 0,
				editgForm: {

					orderId: '',

					imgurl: '',

				},
				titex: 0,
				count: 0
			}
		},
		mounted() {

		},
		methods: {
			sizePicker(e) {
				this.goodid = e.detail.value
			},
			selectintxy(intxt) {
				for (let i = 0; i < this.baseData.length; i++) {
					if (intxt !== this.baseData[i].orderId) {
						this.baseData.remove(i);
					}
				}
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			select() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.addgForm.imgurl = rst.tempFilePaths[0];
					}
				});
			},
			// // 每页显示多少条数据
			sizeChange(val) {
				this.page.pageSize = val;
			},
			//翻页
			currentChange(val) {
				this.page.pageNum = val - 1;
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			submit(index2) {
				this.$refs.outshetl.open()
				this.titex = index2;
			},
			edit(index) {
				this.editIndex = index;
				this.editgForm = this.picture[index];
				// this.editgForm.id='1';
				this.$refs.eduDialog.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {

			},
			addFormqueren() {

			},
			getgoods() {
				uni.request({
					url: this.api.commodity,
					method: "GET",
				}).then(data => {
					let [err, res] = data
					this.typeList = res.data
					console.log(this.typeList.length)
					console.log("xxx" + this.typeList[0].googId)
					for (let i = 0; i < this.typeList.length; i++) {
						this.goodordsid[i] = this.typeList[i].googId
						console.log(this.goodordsid[i])
					}
				})

			},
			gitpicture() {
				uni.request({
					url: this.api.Getpicture,
					method: "GET",
				}).then(data => {
					let [err, res] = data
					this.picture = res.data
					this.page.totalRecords = this.picture.length;
					this.page.totalPages = this.page.totalRecords / this.page.pageSize + 1;
				})
			},
			confirmaddpice() {
				uni.request({
					url: this.api.Pustpicture,
					method: "POST",
					data: this.addgForm,
					success: (res) => {
						if (res.data) {
							uni.showToast({
								title: '图片添加成功',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '图片添加失败',
								icon: "error"
							})
						}
					},
					fail() {
						uni.showToast({
							title: '图片添加失败',
							icon: "error"
						})
					}
				})
			},
			closeaddPice() {
				uni.showToast({
					title: '取消添加图片',
					icon: "none"
				})
			},
			closeputpicture() {
				uni.showToast({
					title: '取消修改图片',
					icon: "none"
				})
			},
			confirmputpicture() {
				uni.request({
					url: this.api.edupicture,
					method: "PUT",
					data: this.editgFormm,
					success: (res) => {

						if (res.data) {
							uni.showToast({
								title: "修改图片成功",
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "修改图片失败",
								icon: "error"
							})
						}
					},
					fail() {
						uni.showToast({
							title: "修改图片失败",
							icon: "error"
						})
					}
				})
			},
			del(index){
				this.pictureIndex=index;
				this.$refs.delDialog.open()
			},
			delpirture(){
				uni.request({
					url:this.api.delpirture+this.picture[pictureIndex].id,
					method:"DELETE",
					success: (res) => {
						if(res.data){
							uni.showToast({
								title:'删除图片成功',
								duration:2000
							})
						}
						else{
							uni.showToast({
								title:'删除图片失败',
								icon:"error"
							})
						}
					},
					fail: () => {
						uni.showToast({
							title:'删除图片失败',
							icon:"error"
						})
					}
				})
			},
			delDian() {
				uni.showToast({
					title: '取消删除图片',
					icon:"none"
				})
			},
		},
		onLoad() {
			this.gitpicture()
			this.getgoods()

		}
	}
</script>

<style scoped>

	.textureCss {
		width: auto;
		height: 40px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		text-align: center;
		line-height: 40px;
	}

	.uni-group {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.left {
		border: 1px solid;
		background-color: #c5c5c5;
		height: 100%;
		width: 10 %;
	}

	.rec {
		float: left;
		width: 75%;
		/* height: 100%; */

	}


	input {
		border: 1px solid;
		border-radius: 18px;
	}

	uni-button {
		font-size: 7px;
		border-radius: 18px;
	}

	.table {
		width: 100%;
		border: 1px solid;
		text-align: center;
	}

	.uni-th {
		/* border: #000000 1px solid; */
		/* background-color: #c5c5c5; */
	}

	uni-td {
		align-items: center;
	}

	.button-edu {
		background-color: #18BC37;
	}

	.button-del {
		background-color: #c00000;
	}

	.scroll-Y {
		height: 600px+;
	}
</style>
